<template>
  <div class=" home">
    <header>
          <van-nav-bar
            left-text="甄优选"
            @click-right="onClickRight"
          >
          <template #title ><van-search placeholder="请输入搜索关键词" :disabled="true" @click="$router.push('/search')"/></template>
           <template #right><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" /></template>
          </van-nav-bar>
          <van-tabs @click="onChange">
            <van-tab v-for="item in pList" :title="item.title" :key="item.title">
            </van-tab>
          </van-tabs>
        </header>
        <main ref="main" @scroll="onScroll">
          <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                  <van-swipe-item v-for="(item,index) in images" :key="index">
                    <img v-lazy="image" width="100vw" height="100vw" fit="contain"/>
                  </van-swipe-item>
                </van-swipe> -->
                <van-swipe :autoplay="3000">
                  <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image" height="180rem" width="375.2rem" fit="contain"/>
                  </van-swipe-item>
                </van-swipe>
          <div class="cont">
          <van-grid :column-num="4" v-show="showtime">
            <van-grid-item v-for="item in gitList" :icon="item.img" :key="item.id" :text="item.text" @click="jumpto(item.text)"/>
          </van-grid>
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
            <router-link v-for="item in proList"
                            :key="item.proId" :to="'/detail/'+item.proId">
                <van-card
                  :num="item.sales"
                  :tag="item.kind"
                  :price="item.price"
                  :title="item.proName"
                  :thumb="item.img"
                  :origin-price="item.price + 500"
                />
              </router-link>
            </van-list>
          </van-pull-refresh>
          </div>
        </main>
        <van-icon name="upgrade" class="to-top" @click="goToTop" ref="toTop"/>
  </div>
</template>

<script>
import VUE from 'vue'
import { getKind, getPage } from '@/api/request.js'
import { Tab, Tabs, Search, NavBar, Swipe, SwipeItem, Grid, PullRefresh, List, Card, GridItem, Icon, Image as VanImage, Lazyload } from 'vant'

VUE.use(Tab)
VUE.use(Tabs)
VUE.use(Search)
VUE.use(NavBar)
VUE.use(Swipe)
VUE.use(SwipeItem)
VUE.use(Grid)
VUE.use(GridItem)
VUE.use(PullRefresh)
VUE.use(List)
VUE.use(Card)
VUE.use(Icon)
VUE.use(VanImage)
VUE.use(Lazyload)

export default {
  data () {
    return {
      // images: [
      //   'https://hbimg.huabanimg.com/7a20a64e14d0e67fb362c8518475101883d65847964a1-3eR5RO_fw658/format/webp',
      //   'https://gdp.alicdn.com/imgextra/i4/711610520/O1CN0102igLC1FiCcQpVmxL_!!711610520.jpg',
      //   'https://hbimg.huabanimg.com/a4136fb8084c63a6cc2caa1b4a55ac14874e63d5171777-SP9IKA',
      //   'https://hbimg.huabanimg.com/c597d9cee2f0111bd8c6859721bb8f7f218192aa19ad1e-m5aUr4_fw658/format/webp'
      // ],
      images: [
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/161448/10/13197/200692/6051729dEafb2aca6/c814511cd0de75a9.jpg!q70.jpg.dpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3097114036,1890105315&fm=26&gp=0.jpg',
        'https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/166685/35/4913/279808/60161564E8cc34666/e921d37e7d975150.jpg!cr_1125x445_0_171!q70.jpg.dpg'
      ],
      kindimgList: [{
        title: '家居生活',
        src: 'https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png'
      },
      {
        title: '服饰鞋包',
        src: 'https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png'
      },
      {
        title: '美食酒水',
        src: 'https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png'
      },
      {
        title: '个护清洁',
        src: 'https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png'
      },
      {
        title: '母婴亲子',
        src: 'https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png'
      },
      {
        title: '运动旅行',
        src: 'https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png'
      },
      {
        title: '数码家电',
        src: 'https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png'
      },
      {
        title: '国际优品',
        src: 'https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png'
      }
      ],
      pList: [{ title: '推荐' },
        { title: '居家生活' },
        { title: '服饰鞋包' },
        { title: '美食酒水' },
        { title: '个护清洁' },
        { title: '母婴亲子' },
        { title: '运动旅行' },
        { title: '数码家电' },
        { title: '国际优品' }
      ],
      gitList: [],
      proList: [],
      loading: false,
      finished: false,
      index: 0,
      isLoading: false,
      num: 10,
      showtime: true
    }
  },
  mounted () {
    // getBanner().then(data => {
    //   this.bannerList = data.data.msg
    //   console.log(this.bannerList)
    // })
    getKind().then(data => {
      // console.log(this.kindimgList[0].src)
      data.data.msg.forEach((val, idx) => {
        this.gitList.push({
          text: val,
          id: idx,
          img: this.kindimgList[idx].src
        })
      })
      this.gitList.length = 8
      // console.log(this.gitList)
    })
  },
  methods: {
    onClickRight () {
      if (sessionStorage.getItem('isLogin') === 'ok') {
        this.$router.push('my')
      } else {
        this.$router.push('login')
      }
    },
    onLoad () {
      this.loading = true
      getPage({
        num: this.num,
        index: this.index++
      }).then(data => {
        this.loading = false
        this.proList = [...this.proList, ...data.data.msg]
        if (data.data.msg.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      // 去刷新整个路由
      this.$router.go(0)
      getPage({
        num: this.num,
        index: 0
      }).then(data => {
        this.proList = data.data.msg
        this.isLoading = false
        this.index = 0
        this.finished = false
      })
    },
    onScroll () {
      if (this.$refs.main.scrollTop > 300) {
        this.$refs.toTop.style.display = 'block'
      } else {
        this.$refs.toTop.style.display = 'none'
      }
    },
    goToTop () {
      this.$refs.main.scrollTop = 0
    },
    jumpto (text) {
      this.$router.push('/searchRes/' + text + '/s')
    },
    onChange (index) {
      switch (index) {
        case 0:
          this.showtime = true
          break
        case 1:
          this.showtime = false
          break
        case 2:
          this.showtime = false
          break
        case 3:
          this.showtime = false
          break
        case 4:
          this.showtime = false
          break
        case 5:
          this.showtime = false
          break
        case 6:
          this.showtime = false
          break
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
    display: flex;
    flex-direction: column;
    overflow: auto;
    header{
      height: 0.9rem;
      ::v-deep .van-nav-bar__text{
        color:black;
        font-weight: 800;
        font-size: 0.18rem;
      }
      ::v-deep  .van-nav-bar .van-icon{
        color: #c8c9cc;
      }
    }
    main{
      flex: 1;
      overflow: auto;
      height: 100%;
    }
    .to-top{
      position: fixed;
      bottom: 1rem; right: 0.2rem;
      background: #afafaf;
      color: #fefefe;
      padding: 0.1rem;
      border-radius: 0.06rem;
      font-size: 0.3rem;
      display: none;
      }
    .van-tabs__nav--complete{
      padding-left: 0px;
      }
    .van-search{
      padding: 0.06rem 0.12rem;
      }
    .van-icon__image{
      width: 0.28rem;
      height: 0.28rem
      }
    ::v-deep .van-nav-bar__title{
      max-width: 80%
      }
    ::v-deep  .van-search{
        width:105%;
      }
    .van-search__content{
      border:1px #c8c9cc solid;
      border-radius: .2rem;
    }
    .my-swipe{
       width: 100%;
       height: 2rem ;
    }

  }

</style>
